<template>
  <div class="newListItem" :style="isDark?'background-color:rgb(34,33,38);':''">
    <div :style="`font-size:`+(parseInt(subjectFont)-3)+`px`" >{{ newsItem.title }}</div>
    <div class="img" v-if="newsItem.has_image === true">
      <img
        v-for="(item, index) in newsItem.image_list"
        :key="index"
        :src="item.url"
        alt=""
      />
    </div>
    <div class="itemBottom">
      <span class="label" v-if="newsItem.label === '置顶'">置顶</span>
      {{ newsItem.source }} {{ newsItem.comment_count }}评论
      {{ timeFormat(newsItem.publish_time, 'onlydate') }}
    </div>
  </div>
</template>

<script>
import { formatDate } from "../../common/utils.js";
import { mapState } from 'vuex'

export default {
  name: "NewsListItem",
  props: {
    newsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      //是否开启夜间
      isDark:false
    };
  },
  methods: {
    timeFormat(time, flag) {
      return formatDate(time, flag)
    }
  },
  mounted() {
    //开启夜间
    this.$bus.$on('DarkOrLight',(data)=>{
        this.isDark = data
    })
  },
  computed:{
    ...mapState(['subjectFont'])
  }
};
</script>

<style scoped>
.newListItem {
  margin: 5px;
  border-bottom: 1px solid #eee;
  padding: 6px 0 6px;
}

.img {
  display: flex;
  justify-content: space-between;
}

.img img {
  width: 33%;
}

.itemBottom {
  font-size: 10px;
  color: #555;
}

.label {
  color: red;
}
</style>
